<template>
    <div class="chart-wrapper">
        <h3 class="chart-title" style="font-family: 楷体;font-size: 30px;">中国各省粮食产量分布</h3>
        <div ref="mapChart" style="width:95%;height:85%;margin-top:15px"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import axios from 'axios'

const mapChart = ref()

function initMap() {
    const myChart = echarts.init(mapChart.value, 'dark')
    myChart.showLoading()
    
    axios.get('/china.json').then(response => {
        myChart.hideLoading()
        echarts.registerMap('China', response.data)
        
        axios.get('/api/queryMap').then(res => {
            if (res.data.code === '200') {
                const data = res.data.data.map(item => ({
                    name: item.province,
                    value: item.yield
                }))

                const values = data.map(item => item.value)
                const min = Math.min(...values)
                const max = Math.max(...values)

                const mapOption = {
                    backgroundColor: 'transparent',
                    tooltip: {
                        show: true,
                        formatter: '{b}: {c} 万吨'
                    },
                    visualMap: {
                        left: 'right',
                        min: min,
                        max: max,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', 
                                   '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        },
                        text: ['高', '低'],
                        calculable: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [{
                        id: 'population',
                        type: 'map',
                        map: 'China',
                        roam: true,
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: data,
                        animationDuration: 1500,
                        animationDurationUpdate: 1500,
                        animationEasing: 'cubicInOut',
                        animationEasingUpdate: 'cubicInOut',
                        universalTransition: {
                            enabled: true,
                            divideShape: 'clone'
                        }
                    }]
                }

                const barOption = {
                    backgroundColor: 'transparent',
                    tooltip: {
                        show: true,
                        formatter: '{b}: {c} 万吨'
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            color: '#fff'
                        }
                    },
                    yAxis: {
                        type: 'category',
                        axisLabel: {
                            rotate: 30,
                            color: '#fff'
                        },
                        data: data.map(item => item.name)
                    },
                    series: [{
                        type: 'bar',
                        id: 'population',
                        data: data.map(item => item.value),
                        animationDuration: 1500,
                        animationDurationUpdate: 1500,
                        animationEasing: 'cubicInOut',
                        animationEasingUpdate: 'cubicInOut',
                        universalTransition: {
                            enabled: true,
                            divideShape: 'clone'
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        }
                    }]
                }

                let currentOption = mapOption
                myChart.setOption(mapOption)

                setInterval(() => {
                    currentOption = currentOption === mapOption ? barOption : mapOption
                    myChart.setOption(currentOption, true)
                }, 5000)
            }
        })
    })

    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

onMounted(() => {
    initMap()
})
</script>

<style scoped>
.chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: transparent;
}

.chart-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    margin-bottom: 5px;
    text-align: center;
}
</style>